<template>
  <component :is="tag" :style="styleProps" class="l-text-component" @click="handleClick">
    {{ text }}

  </component>
  
</template>

<script lang="ts">
import {  defineComponent, defineProps, withDefaults} from "vue";
import {
  transformToComponentPropsOld,
  textDefaultProps,
  textStylePropNames,
} from "@/defaultProps";
import  {useComponentCommonOld}  from "@/hooks/useComponentCommon";
import {TextComponentProps} from "@/defaultProps";
const defaultProps = transformToComponentPropsOld(textDefaultProps);
console.log("ltext", JSON.stringify(defaultProps));
export default defineComponent({
  name : "l-text",
  props: {
    tag: {
      type: String,
      default: "div",
    },
    ...defaultProps,
  },
  setup(props) {

    const {styleProps, handleClick} = useComponentCommonOld(props, textStylePropNames);
    
    return {
        styleProps,
        handleClick,
    }
  },
});
</script>


<style scoped lang="css">
h2.l-text-component,
p.l-text-component {
  margin-bottom: 0;
}

button.l-text-component {
  padding: 5px 10px;
  cursor: pointer;
  display: block;
}

.l-text-component {
  box-sizing: border-box;
  white-space: pre-wrap;
  /* position: relative !important; */
}

</style>
